<template>
  <div>
    <div id="mapContainer" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "8081606dcae9578763f8339b843f6d67",
  };
  AMapLoader.load({
    key: "755572ca458d415727a999078c4a5c30",
    version: "2.0",
  })
    .then((AMap) => {
      // 地图初始化需要设置基本的地图图层，本例展示北京以天安门为中心的11级地图视野。
      const map = new AMap.Map("mapContainer");
      const marker = new AMap.Marker({
        position: [116.39, 39.9], //位置
      });
      map.add(marker); //添加到地图
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
});
</script>

<style lang="scss"></style>
